<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" size="medium">
      <el-form-item>
        <!-- <el-input v-model="searchObj.name" placeholder="讲师" /> -->
        <el-autocomplete class="inline-input" v-model="searchObj.name" :fetch-suggestions="querySearch" placeholder="讲师姓名"
          :trigger-on-focus="false" @select="handleSelect" value-key="name"></el-autocomplete>
      </el-form-item>

      <el-form-item>
        <el-select v-model="searchObj.level" clearable placeholder="头衔">
          <el-option value="1" label="高级讲师" />
          <el-option value="2" label="首席讲师" />
        </el-select>
      </el-form-item>

      <el-form-item label="入驻时间">
        <el-date-picker v-model="searchObj.joinDateBegin" placeholder="开始时间" value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item label="-">
        <el-date-picker v-model="searchObj.joinDateEnd" placeholder="结束时间" value-format="yyyy-MM-dd" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
        <el-button type="default" @click="resetData()">清空</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
        <el-button type="danger" @click="batchDelete()">批量删除</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table ref="multipleTable" :data="list" border fit stripe="true" highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="序号" width="50">
        <template slot-scope="scope">
          {{ (currPage-1)*limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="80">
      </el-table-column>
      <el-table-column prop="level" label="头衔">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.level === 2">首席讲师</el-tag>
          <el-tag v-if="scope.row.level === 1" type="success">高级讲师</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="intro" label="简介">
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="60">
      </el-table-column>
      <el-table-column prop="joinDate" label="入住时间" width="120">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <router-link :to="'/teacher/edit/' + scope.row.id">
            <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
          </router-link>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination background style="padding: 30px;" layout="prev, pager, next, jumper, sizes, ->, total" :page-sizes="[5, 10, 20, 50]"
      :total="totalCount" :page-size="limit" :page-count="totalPage" :current-page="currPage" @current-change="changePage"
      @size-change="changeSize">
    </el-pagination>
  </div>
</template>

<script>
  import {
    list,
    pageList,
    removeById,
    batchRemove,
    getByName
  } from '@/api/teacher'

  export default {
    data() {
      return {
        list: [],
        listLoading: true,
        totalCount: 0, // 总记录数
        totalPage: 0, // 总页数
        currPage: 1, // 当前页码
        limit: 5, // 每页条数
        searchObj: {}, // 查询条件对象
        multipleSelection: [] // 存放选中的数据id
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      // 输入关键词，查询匹配列表，提示
      querySearch(queryString, cb) {
        getByName(queryString).then(response => {
          cb(response.data)
        })
      },
      // 取消全选
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      // 选择时触发
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      // 批量删除
      batchDelete() {
        // 判断是否已选择数据
        if (this.multipleSelection.length === 0) {
          this.$message({
            type: 'warning',
            message: '请先选择要删除的数据'
          })
        } else {
          // 询问是否删除
          this.$confirm('此操作将永久删除这些数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let ids = []
            this.multipleSelection.forEach(item => {
              ids.push(item.id)
            })
            return batchRemove(ids)
          }).then(response => {
            // 刷新页面
            this.fetchData()
            // 弹出成功提示
            this.$message({
              message: response.message,
              type: 'success'
            })
          }).catch((err) => {
            console.log(err)
            if (err === 'cancel') {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            }
          })
        }
      },
      // 查询数据
      fetchData() {
        this.listLoading = true
        pageList(this.currPage, this.limit, this.searchObj).then(response => {
          this.list = response.data.list
          this.totalCount = response.data.totalCount
          this.limit = response.data.pageSize
          this.totalPage = response.data.totalPage
          this.listLoading = false
        })
      },
      changePage(page) {
        this.currPage = page
        this.fetchData()
      },
      changeSize(size) {
        this.limit = size
        this.fetchData()
      },
      resetData() {
        this.searchObj = {}
        this.fetchData()
      },
      handleDelete(id) {
        // 询问是否删除
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return removeById(id)
        }).then(response => {
          // 刷新页面
          this.fetchData()
          // 弹出成功提示
          this.$message({
            message: response.message,
            type: 'success'
          })
        }).catch((err) => {
          console.log(err)
          if (err === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          }
        })
      }
    }
  }
</script>

<style>
</style>
